<template>
	<view class="withdrawal-layout">
		<uv-navbar title="提现" :placeholder="true" :titleStyle="{fontSize:'18px'}" autoBack>
			<template #right>
				<text @tap="showRole">限额</text>
			</template>
		</uv-navbar>
		<!-- 提现银行卡 -->
		<view class="withdrawal-bankcard">
			<text class="withdrawal-bankcard-title">提现到</text>
			<view class="withdrawal-bankcard-list">
				<view class="withdrawal-bankcard-cell" v-for="item in dataInfo.cardList" :key="item.id" @tap="didSelectSettleCardItem(item)">
					<image :src="item.id == selectSettleCard.id ? '/static/login/checkboxsel@2x.png' : '/static/login/checkboxnol@2x.png'" mode="aspectFit"></image>
					<view class="withdrawal-bankcard-cell-container">
						<text>{{item.bankName}}({{item.settleType == '0' ? '对公' : '对私'}})</text>
						<text>{{item.acctName}}</text>
						<text>{{formatBankCardNo(item)}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 提现金额 -->
		<view class="withdrawal-form">
			<text>提现金额</text>
			<view class="withdrawal-form-input-box">
				<text class="withdrawal-form-input-unit">¥</text>
				<xh-input placeholder="输入提现金额" fontSize="32rpx" :isLine="false" v-model="moneyValue"></xh-input>
				<view class="line"></view>
			</view>
			<text class="withdrawal-form-balance-text">可提现余额：¥{{dataInfo.wallet.withdrawalAmount}}</text>
			<text class="withdrawal-form--invoice-balance-text" v-if="selectSettleCard.isPublic == '0'">发票余额：¥{{dataInfo.invoiceBillBalance}}</text>
		</view>
		<view class="agreement-box">
			<xh-checkbox :isChecked="isChecked" @change="value=>isChecked = value"></xh-checkbox>
			<text class="agreement-text" @tap="showArgeement">《自然人服务合作协议》</text>
		</view>
		<view class="submit-btn" style="margin: 50rpx 0 0;" @tap="submit">确认提现</view>
		<!-- 限额弹框 -->
		<xh-withdrawal-role-pop ref="rolePopRef"></xh-withdrawal-role-pop>
		<!-- 确认提现输入支付密码弹框 -->
		<xh-withdrawal-password-pop ref="pwdPopRef"></xh-withdrawal-password-pop>
	</view>
</template>

<script setup>
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import XhWithdrawalRolePop from './widget/xh-withdrawal-role-pop.vue'
	import XhWithdrawalPasswordPop from './widget/xh-withdrawal-password-pop.vue'
	import { app_user_lgjj } from '@/common/config/config.js'
	import { getWalletRule,getWalletsInfo,createWithdrawOrder } from '@/common/api/api.js'
	const rolePopRef = ref(null)
	const pwdPopRef = ref(null)
	const isChecked = ref(false)
	const dataInfo = ref({})
	//选择的结算卡
	const selectSettleCard = ref(null)
	//输入的提现金额
	const moneyValue = ref('')
	const props = defineProps(['data'])
	dataInfo.value = JSON.parse(decodeURIComponent(props.data))
	console.log(dataInfo.value)
	//脱敏银行卡号
	const formatBankCardNo = (item)=>{
		return uni.$utils.formatBankCardNo(item.cardNo)
	}
	// 查看限额规则
	const showRole = ()=>{
		rolePopRef.value.open(dataInfo.value.rule,selectSettleCard.value.isPublic,dataInfo.value.wallet.remark)
	}
	// 查看协议
	const showArgeement = ()=>{
		uni.navigateTo({
			url:`/pages/webview/webview?title=自然人服务合作协议&url=${app_user_lgjj()}`
		})
	}
	//选择指定结算卡
	const didSelectSettleCardItem = (item)=>{
		selectSettleCard.value = item
		getWalletRuleInfo(item)
	}
	//获取提现规则
	const getWalletRuleInfo = async (model)=>{
		let params = {}
		params.accountType = '02'
		params.accType = dataInfo.value.wallet.accType
		params.settleType = model.isPublic
		const res = await getWalletRule(params)
		dataInfo.value = {...dataInfo.value,rule:res.result}
		console.log(dataInfo.value)
	}
	//获取发票余额
	const getInvoiceBalanceData = async ()=>{
		const res = await getWalletsInfo()
		dataInfo.value = {...dataInfo.value,invoiceBillBalance:res.result.invoiceBillBalance}
	}
	// 提现
	const submit = async ()=>{
		if(!selectSettleCard){
			uni.$utils.showToast('请选择提现到的账银行卡')
			return
		}
		else if(!dataInfo.value.rule){
			uni.$utils.showToast('操作失败，未获取到提现限额信息')
			return
		}
		else if(uni.$uv.test.empty(moneyValue.value)){
			uni.$utils.showToast('请输入提现金额')
			return
		}
		else if((parseFloat(moneyValue.value) || 0) < dataInfo.value.rule.singleMinAmount){
			uni.$utils.showToast(`单笔提现，不低于${dataInfo.value.rule.singleMinAmount}元`)
			return
		}
		else if((parseFloat(moneyValue.value) || 0) > dataInfo.value.rule.singleMaxAmount){
			uni.$utils.showToast(`单笔提现，不高于${dataInfo.value.rule.singleMaxAmount}元`)
			return
		}
		else if ((parseFloat(moneyValue.value) || 0) > dataInfo.value.invoiceBillBalance && selectSettleCard.value.isPublic == '0') {
			uni.$utils.showToast('发票余额不足')
			return
		}
		else if(!isChecked.value){
			uni.$utils.showToast('请先阅读并同意相关协议')
			return
		}
		let params = {}
		params.accType = dataInfo.value.wallet.accType
		params.settleId = selectSettleCard.value.id
		params.accountNo = dataInfo.value.accountNo
		params.subAcctNo = dataInfo.value.wallet.accountNo
		params.accountType = '02'
		params.consoleType = 'HTB'
		params.withdrawAmount = parseFloat(moneyValue.value) || 0
		const res = await createWithdrawOrder(params)
		params.appPayId = res.result.appPayId
		pwdPopRef.value.open({requestParams:params,...res.result,...selectSettleCard.value,walletRemark:dataInfo.value.wallet.remark})
	}
	onLoad(()=>{
		if(dataInfo.value.cardList.length > 0) {
			selectSettleCard.value = dataInfo.value.cardList[0]
			getWalletRuleInfo(selectSettleCard.value)
		}
	})
	onShow(()=>{
		getInvoiceBalanceData()
	})
</script>

<style lang="scss" scoped>
.withdrawal-layout{
	padding: 30rpx 30rpx 100rpx;
	.withdrawal-bankcard{
		background-color: #f0f0f0;
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		.withdrawal-bankcard-title{
			margin: 30rpx 0;
		}
		.withdrawal-bankcard-cell{
			display: flex;
			margin-bottom: 30rpx;
			image{
				width: 24rpx;
				height: 24rpx;
				margin-top: 6rpx;
			}
			.withdrawal-bankcard-cell-container{
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				text:nth-child(1){
					font-weight: bold;
				}
				text:nth-child(2){
					margin: 12rpx 0;
				}
				text:nth-child(n + 2){
					font-size: 24rpx;
					color: $xh-color-9;
				}
			}
		}
	}
	.withdrawal-form{
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
		
		.withdrawal-form-input-box{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			position: relative;
			.withdrawal-form-input-unit{
				font-size: 60rpx;
				font-weight: bold;
			}
		}
		.withdrawal-form-balance-text{
			margin-top: 20rpx;
			font-size: 24rpx;
		}
		.withdrawal-form--invoice-balance-text{
			margin-top: 12rpx;
			font-size: 24rpx;
		}
	}
	.agreement-box{
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		.agreement-text{
			font-size: 26rpx;
			color: $xh-theme-color;
		}
	}
}
</style>
